<template>
  <el-drawer
    :title="
      drawer.type === 'edit'
        ? '编辑'
        : drawer.type === 'new'
        ? '新增活动'
        : '活动详情'
    "
    :visible.sync="drawer.show"
    custom-class="add-drawer"
    ref="drawer"
    size="70%"
    :before-close="handleClose"
  >
    <div class="demo-drawer__content">
      <el-form
        v-if="ruleData"
        :model="ruleData"
        :rules="ruleDataRules"
        ref="ruleDataFormRef"
        style="padding: 0rem 2rem"
        label-position="top"
        label-width="100px"
      >
        <h2 class="title_line">所属油站</h2>
        <el-form-item prop="enterpriseId" label="油企选择" v-if="authUser">
          <el-select
            v-model="ruleData.enterpriseId"
            placeholder="请选择油企"
            size="small"
            filterable
            clearable
            :disabled="drawer.type === 'view'"
            style="width: 100%"
            @change="handleSelectChange"
          >
            <el-option
              v-for="(item, index) in settingData.enterpriseList"
              :key="index"
              :label="item.enterpriseName"
              :value="item.enterpriseId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="stationId" label="油站选择">
          <el-select
            v-model="ruleData.stationId"
            placeholder="请选择油站"
            size="small"
            filterable
            clearable
            :disabled="drawer.type === 'view'"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in settingData.stationList"
              :key="index"
              :label="item.stationName"
              :value="item.stationId"
            ></el-option>
          </el-select>
        </el-form-item>

        <h2 class="title_line radio-activity">活动形式</h2>
        <el-form-item prop="activityMode">
          <el-radio-group
            v-model="ruleData.activityMode"
            size="medium"
            @input="inputRadioActivity"
          >
            <el-radio-button
              :disabled="drawer.type === 'view'"
              label="recharge"
              class="radio-button"
              >充值</el-radio-button
            >
            <el-radio-button
              :disabled="drawer.type === 'view'"
              label="consume"
              class="radio-button"
              >消费</el-radio-button
            >
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="参与活动支付方式"
          v-show="isCheckboxGroup"
          prop="checkboxGroup"
        >
          <label slot="label"
            ><span style="color: red" v-show="isCheckboxGroup === true">*</span>
            参与活动支付方式</label
          >
          <el-checkbox-group
            v-model="checkboxGroup"
            size="medium"
            @change="inputRadioMethodPayment"
          >
            <el-checkbox-button
              :disabled="drawer.type === 'view'"
              v-for="item in citiesPayment"
              :label="item.value"
              :key="item.text"
              >{{ item.text }}</el-checkbox-button
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="电子卡类型" prop="cardType">
          <el-radio-group
            v-model="ruleData.cardType"
            size="medium"
            @input="inputRadioCardType"
          >
            <el-radio-button
              :disabled="drawer.type === 'view'"
              label="1"
              class="radio-button"
              >汽油卡</el-radio-button
            >
            <el-radio-button
              :disabled="drawer.type === 'view'"
              label="2"
              class="radio-button"
              >柴油卡</el-radio-button
            >
            <el-radio-button
              :disabled="drawer.type === 'view'"
              label="4"
              class="radio-button"
              >LNG</el-radio-button
            >
            <el-radio-button
              :disabled="drawer.type === 'view'"
              label="5"
              class="radio-button"
              >CNG</el-radio-button
            >
          </el-radio-group>
        </el-form-item>

        <!-- <el-form-item prop="cardType" label="电子卡类型">
          <el-select
            v-model="ruleData.cardType"
            placeholder="请选择电子卡类型"
            size="small"
            clearable
            :disabled="drawer.type === 'view'"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in settingData.cardTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <div v-if="isCheckboxGroup">
          <h2 class="title_line">活动设置</h2>
          <el-form-item prop="activityType" label="活动类型">
            <el-select
              v-model="ruleData.activityType"
              placeholder="请选择活动类型"
              size="small"
              clearable
              :disabled="drawer.type === 'view'"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in activityTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="活动内容"
            v-if="ruleData.activityType === 'coupon'"
          >
            <el-row
              v-for="(item, index) in ruleData.contentList"
              :key="index"
              style="margin-bottom: 20px"
            >
              <el-col :span="5">
                <el-form-item
                  style="display: inline-block"
                  :prop="`contentList[${index}].rechargeAmtLowerLimit`"
                  :rules="ruleDataRules.contentList.rechargeAmtLowerLimit"
                >
                  <el-input-number
                    :disabled="drawer.type === 'view'"
                    v-model="item.rechargeAmtLowerLimit"
                    placeholder="请输入"
                    style="width: 100%"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="text-align: center">
                <span>≤充值金额(元)＜</span>
              </el-col>
              <el-col :span="5">
                <el-form-item
                  style="display: inline-block"
                  :prop="`contentList[${index}].rechargeAmtUpperLimit`"
                  :rules="ruleDataRules.contentList.rechargeAmtUpperLimit"
                >
                  <el-input-number
                    :disabled="drawer.type === 'view'"
                    v-model="item.rechargeAmtUpperLimit"
                    placeholder="请输入"
                    style="width: 100%"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="text-align: center">
                <span>，赠送优惠券</span>
              </el-col>
              <el-col :span="5">
                <el-form-item
                  style="display: inline-block"
                  :prop="`contentList[${index}].couponIssueId`"
                  :rules="ruleDataRules.contentList.couponIssueId"
                >
                  <el-select
                    :disabled="drawer.type === 'view'"
                    v-model="item.couponIssueId"
                    placeholder="请选择"
                    style="width: 100%"
                    multiple
                    filterable
                    :collapse-tags="drawer.type !== 'view'"
                  >
                    <el-option
                      v-for="item in settingData.couponList"
                      :key="item.id"
                      :label="item.couponRemark"
                      :value="item.id"
                    >
                      <span style="float: left">{{ item.couponRemark }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                        >{{ item.id }}</span
                      >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                v-if="drawer.type != 'view'"
                :span="2"
                style="
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  height: 40px;
                  margin-left: 10px;
                "
              >
                <el-button
                  v-if="index != 0 || ruleData.contentList.length > 1"
                  type="danger"
                  icon="el-icon-minus"
                  circle
                  size="mini"
                  @click="contentListDel(index)"
                ></el-button>
                <el-button
                  v-if="index + 1 === ruleData.contentList.length"
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  circle
                  @click="contentListAdd(index)"
                ></el-button>
              </el-col>
            </el-row>
            <!-- <el-row
            v-for="(item, index) in ruleData.contentList"
            :key="index"
            style="margin-bottom: 15px"
          >
            <el-col :span="5">
              <el-input-number
                :disabled="drawer.type === 'view'"
                v-model="item.rechargeAmtLowerLimit"
                placeholder="请输入"
                style="width: 100%"
              ></el-input-number>
            </el-col>
            <el-col :span="3" style="text-align: center">
              <span>≤充值金额(元)＜</span>
            </el-col>
            <el-col :span="5">
              <el-input-number
                :disabled="drawer.type === 'view'"
                v-model="item.rechargeAmtUpperLimit"
                placeholder="请输入"
                style="width: 100%"
              ></el-input-number>
            </el-col>
            <el-col :span="3" style="text-align: center">
              <span>，赠送优惠券</span>
            </el-col>
            <el-col :span="5">
              <el-select
                :disabled="drawer.type === 'view'"
                v-model="item.couponIssueId"
                placeholder="请选择"
                style="width: 100%"
                multiple
                filterable
                :collapse-tags="drawer.type !== 'view'"
              >
                <el-option
                  v-for="item in settingData.couponList"
                  :key="item.id"
                  :label="item.couponRemark"
                  :value="item.id"
                >
                  <span style="float: left">{{ item.couponRemark }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.id
                  }}</span>
                </el-option>
              </el-select>
            </el-col>
            <el-col
              v-if="drawer.type != 'view'"
              :span="2"
              style="
                display: flex;
                flex-direction: row;
                align-items: center;
                height: 40px;
                margin-left: 10px;
              "
            >
              <el-button
                v-if="index != 0 || ruleData.contentList.length > 1"
                type="danger"
                icon="el-icon-minus"
                circle
                size="mini"
                @click="contentListDel(index)"
              ></el-button>
              <el-button
                v-if="index + 1 === ruleData.contentList.length"
                type="primary"
                size="mini"
                icon="el-icon-plus"
                circle
                @click="contentListAdd(index)"
              ></el-button>
            </el-col>
          </el-row> -->
          </el-form-item>
          <el-form-item
            label="赠送方式"
            prop="settingRuleType"
            v-if="ruleData.activityType === 'balance'"
          >
            <el-select
              v-model="ruleData.settingRuleType"
              placeholder="请选择赠送方式"
              size="small"
              clearable
              :disabled="drawer.type === 'view'"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in settingRuleTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="活动内容"
            v-if="
              (['1', '2'].includes(ruleData.settingRuleType) &&
                ruleData.activityType === 'balance') ||
              ruleData.activityType === 'integral'
            "
          >
            <el-row
              v-for="(item, index) in ruleData.contentList"
              :key="index"
              style="margin-bottom: 20px"
            >
              <el-col :span="5">
                <el-form-item
                  style="display: inline-block"
                  :prop="`contentList[${index}].rechargeAmtLowerLimit`"
                  :rules="ruleDataRules.contentList.rechargeAmtLowerLimit"
                >
                  <el-input-number
                    :disabled="drawer.type === 'view'"
                    v-model="item.rechargeAmtLowerLimit"
                    placeholder="请输入"
                    style="width: 100%"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="text-align: center">
                <span>≤金额(元)＜</span>
              </el-col>
              <el-col :span="5">
                <el-form-item
                  style="display: inline-block"
                  :prop="`contentList[${index}].rechargeAmtUpperLimit`"
                  :rules="ruleDataRules.contentList.rechargeAmtUpperLimit"
                >
                  <el-input-number
                    :disabled="drawer.type === 'view'"
                    v-model="item.rechargeAmtUpperLimit"
                    placeholder="请输入"
                    style="width: 100%"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col
                v-if="ruleData.activityType !== 'integral'"
                :span="3"
                style="text-align: center"
              >
                <span>，赠送</span>
              </el-col>
              <el-col v-else :span="3" style="text-align: center">
                <span>，每充值1元赠送</span>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  style="display: inline-block"
                  :prop="`contentList[${index}].presentAmount`"
                  :rules="ruleDataRules.contentList.presentAmount"
                >
                  <el-input-number
                    v-if="ruleData.activityType !== 'integral'"
                    :disabled="drawer.type === 'view'"
                    v-model="item.presentAmount"
                    placeholder="请输入"
                    style="width: 100%"
                  ></el-input-number>
                  <el-input
                    v-else
                    type="number"
                    :disabled="drawer.type === 'view'"
                    v-model="item.presentAmount"
                    placeholder="请输入"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col
                v-if="ruleData.activityType !== 'integral'"
                :span="1"
                style="margin-left: 5px"
              >
                <span v-if="ruleData.settingRuleType === '1'">元</span>
                <span v-else>%</span>
              </el-col>
              <el-col v-else :span="1" style="margin-left: 5px">
                <span>积分</span>
              </el-col>
              <el-col
                v-if="drawer.type != 'view'"
                :span="2"
                style="
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  height: 40px;
                  margin-left: 10px;
                "
              >
                <el-button
                  v-if="index != 0 || ruleData.contentList.length > 1"
                  type="danger"
                  icon="el-icon-minus"
                  circle
                  size="mini"
                  @click="contentListDel(index)"
                ></el-button>
                <el-button
                  v-if="index + 1 === ruleData.contentList.length"
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  circle
                  @click="contentListAdd(index)"
                ></el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item
            label="是否发送活动通知"
            style="margin-bottom: 0 !important"
            prop="sendFlag"
          >
            <el-radio-group v-model="ruleData.sendFlag">
              <el-radio :disabled="drawer.type === 'view'" :label="1"
                >是</el-radio
              >
              <el-radio :disabled="drawer.type === 'view'" :label="0"
                >否</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="wxContent" v-if="ruleData.sendFlag === 1">
            <el-input
              :disabled="drawer.type === 'view'"
              v-model="ruleData.wxContent"
              size="small"
              maxlength="20"
              show-word-limit
              placeholder="推送内容仅限20个字"
              style="width: 400px; display: block"
            ></el-input>
          </el-form-item>
          <el-form-item style="text-align: end">
            <div class="demo-drawer__footer">
              <el-button @click="handleClone">取消</el-button>
              <el-button
                v-if="drawer.type === 'edit'"
                type="primary"
                @click="handleSubmitEdit"
                >提交</el-button
              >
              <el-button
                v-if="drawer.type === 'new'"
                type="primary"
                @click="handleSubmitAdd"
                >提交</el-button
              >
            </div>
          </el-form-item>
        </div>

        <div v-else>
          <el-form
            :model="formConsumption"
            :rules="formConsumptionRules"
            ref="formConsumptionRef"
          >
            <el-form-item label="活动方式">
              <label slot="label"
                ><span style="color: red">*</span> 活动方式</label
              >
              <div>
                <span class="span-text">按金额</span>
                <el-switch
                  :disabled="drawer.type === 'view'"
                  v-model="amount"
                  @change="changeAmount"
                >
                </el-switch>
              </div>
              <span class="span-text">按升数</span>
              <el-switch
                :disabled="drawer.type === 'view'"
                v-model="litres"
                @change="changeLitres"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="赠送方式" prop="settingRuleType">
              <el-select
                :disabled="drawer.type === 'view'"
                style="width: 100%"
                size="small"
                v-model="formConsumption.settingRuleType"
                placeholder="请选择活动区域"
              >
                <el-option label="按金额赠送" value="1"></el-option>
                <el-option label="按比例赠送" value="2"></el-option>
              </el-select>
            </el-form-item>

            <div v-show="(amount || litres) && formConsumption.settingRuleType">
              <div class="span-div">
                <div class="span-div-qj">消费区间</div>
                <div>赠送金额</div>
              </div>
              <div
                class="span-div"
                v-for="(item, index) in formConsumption.contentList"
              >
                <el-form-item
                  :rules="
                    formConsumptionRules.contentList.rechargeAmtLowerLimit
                  "
                  :prop="`contentList[${index}].rechargeAmtLowerLimit`"
                >
                  <el-input-number
                    style="width: 210px"
                    v-model="item.rechargeAmtLowerLimit"
                    :disabled="drawer.type === 'view'"
                    :precision="2"
                    :step="0.1"
                    placeholder="请输入"
                  ></el-input-number>
                </el-form-item>
                <span class="span-yang">
                  {{ formConsumption.accordingTo === "amount" ? "元 ——" : "" }}
                  {{ formConsumption.accordingTo === "litres" ? "升 ——" : "" }}
                </span>

                <el-form-item
                  :rules="
                    formConsumptionRules.contentList.rechargeAmtUpperLimit
                  "
                  :prop="`contentList[${index}].rechargeAmtUpperLimit`"
                >
                  <el-input-number
                    style="width: 210px"
                    v-model="item.rechargeAmtUpperLimit"
                    :precision="2"
                    :step="0.1"
                    :disabled="drawer.type === 'view'"
                    placeholder="请输入"
                  ></el-input-number>
                </el-form-item>
                <span class="span-yan">
                  {{ formConsumption.accordingTo === "amount" ? "元" : "" }}
                  {{ formConsumption.accordingTo === "litres" ? "升" : "" }}
                </span>
                <el-form-item
                  :rules="formConsumptionRules.contentList.presentAmount"
                  :prop="`contentList[${index}].presentAmount`"
                >
                  <el-input-number
                    style="width: 210px"
                    v-model="item.presentAmount"
                    :precision="2"
                    :step="0.1"
                    :disabled="drawer.type === 'view'"
                    placeholder="请输入"
                  ></el-input-number>
                  <span style="margin: 0px 10px">{{
                    formConsumption.settingRuleType === "1" ? "元" : "%"
                  }}</span>
                </el-form-item>
                <el-form-item>
                  <el-button
                    :disabled="drawer.type === 'view'"
                    size="medium"
                    type="primary"
                    @click="addContentList"
                    style="margin-left: 15px"
                    v-show="index === formConsumption.contentList.length - 1"
                    >增加</el-button
                  >
                  <el-button
                    :disabled="drawer.type === 'view'"
                    size="medium"
                    @click="popContentList"
                    v-show="formConsumption.contentList.length !== 1"
                    >删除</el-button
                  >
                </el-form-item>
              </div>
            </div>
            <div>
              <el-form-item style="text-align: end">
                <div class="demo-drawer__footer">
                  <el-button @click="consumptionHandleClone">取消</el-button>
                  <el-button
                    :disabled="drawer.type === 'view'"
                    v-if="drawer.type === 'edit'"
                    type="primary"
                    @click="consumptionHandleEdit"
                    >提交</el-button
                  >
                  <el-button
                    :disabled="drawer.type === 'view'"
                    v-if="drawer.type === 'new'"
                    type="primary"
                    @click="consumptionHandleAdd"
                    >提交</el-button
                  >
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-form>
    </div>
  </el-drawer>
</template>
<script>
import { cloneDeep } from "lodash";
import { listEnterpriseStation } from "@/api/dept";
import { customerDetail, addConsumeActivity } from "@/api/customer/cardSetting";

const cityOptionsPayment = [
  { text: "微信", value: "wx" },
  { text: "手动添加", value: "xj" },
];

export default {
  props: {
    parm: {
      type: Object,
      default: null,
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (this.checkboxGroup.length === 0) {
        callback(new Error("请选择参与活动支付方式"));
      } else {
        callback();
      }
    };
    var validateNum = (rule, value, callback) => {
      let decimal = this.isDecimal(value);
      if (decimal.y > 2 && decimal.x != 0) {
        callback(new Error("最多输入两位小数"));
      }
      callback();
    };
    var validateMin = (rule, value, callback) => {
      const max =
        this.formConsumption.contentList[rule.field[12]].rechargeAmtUpperLimit;

      if (value >= max) {
        callback(new Error("开始区间不能大于结束区间"));
      }

      let decimal = this.isDecimal(value);
      if (decimal.y > 2 && decimal.x != 0) {
        callback(new Error("最多输入两位小数"));
      }
      callback();
    };
    var validateMax = (rule, value, callback) => {
      const min =
        this.formConsumption.contentList[rule.field[12]].rechargeAmtLowerLimit;
      if (value <= min) {
        callback(new Error("结束区间不能小于开始区间"));
      }

      let decimal = this.isDecimal(value);
      if (decimal.y > 2 && decimal.x != 0) {
        callback(new Error("最多输入两位小数"));
      }
      callback();
    };
    return {
      amount: true,
      litres: false,
      // 消费
      formConsumption: {
        accordingTo: "amount",
        settingRuleType: "",
        contentList: [
          {
            presentAmount: undefined,
            rechargeAmtLowerLimit: undefined,
            rechargeAmtUpperLimit: undefined,
          },
        ],
      },
      formConsumptionRules: {
        settingRuleType: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        contentList: {
          rechargeAmtLowerLimit: [
            { required: true, message: "请输入" },
            { validator: validateMin },
          ],
          rechargeAmtUpperLimit: [
            { required: true, message: "请输入" },
            { validator: validateMax },
          ],
          presentAmount: [
            { required: true, message: "请输入" },
            { validator: validateNum },
          ],
        },
      },

      isCheckboxGroup: true,
      checkboxGroup: [],

      citiesPayment: cityOptionsPayment,
      drawer: {
        show: this.parm ? this.parm.drawerShow : false,
        type: this.parm ? this.parm.drawerType : "read", // edit || view || new
      },
      ruleData: this.parm ? this.parm.ruleData : {},
      settingData: this.parm ? this.parm.settingData : {},
      ruleDataRules: {
        enterpriseId: [
          { required: true, message: "请选择油企", trigger: "change" },
        ],
        stationId: [
          { required: true, message: "请选择油站", trigger: "change" },
        ],
        activityType: [
          { required: true, message: "请选择活动类型", trigger: "change" },
        ],
        settingRuleType: [
          { required: true, message: "请选择赠送方式", trigger: "change" },
        ],
        contentList: {
          rechargeAmtLowerLimit: [
            { required: true, message: "请输入", trigger: "blur" },
            { validator: validateNum, trigger: "blur" },
          ],
          rechargeAmtUpperLimit: [
            { required: true, message: "请输入", trigger: "blur" },
            { validator: validateNum, trigger: "blur" },
          ],
          presentAmount: [
            { required: true, message: "请输入", trigger: "blur" },
            { validator: validateNum, trigger: "blur" },
          ],
          couponIssueId: [
            { required: true, message: "请选择优惠券", trigger: "blur" },
          ],
        },
        sendFlag: [
          { required: true, message: "请选择是否发送", trigger: "change" },
        ],
        wxContent: [
          { required: true, message: "请输入推送内容", trigger: "blur" },
        ],
        checkboxGroup: [{ validator: validatePass, trigger: "blur" }],
        cardType: [
          { required: true, message: "请选择电子卡类型", trigger: "blur" },
        ],
        activityMode: [
          { required: true, message: "请选择活动形式", trigger: "blur" },
        ],
      },
      activityTypeList: [
        {
          label: "赠送电子卡金额",
          value: "balance",
        },
        {
          label: "赠送优惠券",
          value: "coupon",
        },
        {
          label: "赠送积分",
          value: "integral",
        },
      ],
      settingRuleTypeList: [
        {
          label: "赠送金额",
          value: "1",
        },
        {
          label: "赠送比例",
          value: "2",
        },
      ],
    };
  },
  methods: {
    // 清除数据消费
    clearingData() {
      this.formConsumption = {
        accordingTo: "amount",
        settingRuleType: "",
        contentList: [
          {
            presentAmount: undefined,
            rechargeAmtLowerLimit: undefined,
            rechargeAmtUpperLimit: undefined,
          },
        ],
      };
      this.amount = true;
      this.litres = false;
    },

    // 点击编辑
    consumptionHandleEdit() {
      console.log("点击编辑");
    },
    //点击提交add
    consumptionHandleAdd() {
      let add = 0;
      this.$refs.formConsumptionRef.validate((res) => {
        if (res) {
        } else {
          add++;
        }
      });

      this.$refs.ruleDataFormRef.validateField(
        ["enterpriseId", "stationId", "activityMode", "cardType"],
        (res) => {
          if (res) {
            add++;
          }
        }
      );
      if (add === 0) {
        console.log("验证通过1", this.formConsumption);
        console.log("验证通过2", this.ruleData);

        this.$confirm(`确认保存活动吗？`).then(() => {
          const data = {
            enterpriseId: this.ruleData.enterpriseId,
            stationId: this.ruleData.stationId,
            activityMode: this.ruleData.activityMode,
            payType: this.ruleData.payType,
            cardType: this.ruleData.cardType,
            ...this.formConsumption,
          };
          addConsumeActivity(data).then((res) => {
            if (res && res.code === 200) {
              this.$message.success(res.msg);
              this.drawer.show = false;
              this.$emit("getData");
              this.clearingData();
            } else {
              this.$message.error(res.msg);
            }
          });
        });
      } else {
        console.log("验证不通过1", this.formConsumption);
        console.log("验证不通过2", this.ruleData);
      }
    },
    // 按金额
    changeAmount(e) {
      if (e) {
        this.litres = false;
        this.formConsumption.accordingTo = "amount";
      } else {
        this.litres = true;
        this.formConsumption.accordingTo = "litres";
      }
    },
    // 按升数
    changeLitres(e) {
      if (e) {
        this.amount = false;
        this.formConsumption.accordingTo = "litres";
      } else {
        this.amount = true;
        this.formConsumption.accordingTo = "amount";
      }
    },
    // 点击取消
    consumptionHandleClone() {
      this.clearingData();
      this.handleClone();
      console.log("点击取消");
    },
    // 增加赠送区间
    addContentList() {
      this.formConsumption.contentList.push({
        presentAmount: undefined,
        rechargeAmtLowerLimit: undefined,
        rechargeAmtUpperLimit: undefined,
      });
    },
    // 删除期间
    popContentList() {
      this.formConsumption.contentList.pop();
    },
    isDecimal(num) {
      let data = {};
      data.x = String(num).indexOf(".") + 1;
      data.y = String(num).length - data.x;
      return data;
    },
    // 根据油企获取油站
    handleSelectChange(value) {
      this.settingData.stationList = [];
      this.getStationList(value);
    },
    getStationList(val) {
      listEnterpriseStation({ enterpriseId: val }).then((res) => {
        this.settingData.stationList = res;
      });
    },
    memberChange(val) {
      this.$forceUpdate();
    },
    // 新增充值
    handleSubmitAdd() {
      console.log("新增充值", this.ruleData);
      this.$refs.ruleDataFormRef.validate((valid) => {
        if (valid) {
          let ruleData = cloneDeep(this.ruleData);
          this.$confirm(`确认保存活动吗？`).then(() => {
            customerDetail(ruleData).then((res) => {
              if (res && res.code === 200) {
                this.$message.success(res.msg);
                this.drawer.show = false;
                this.$emit("getData");
              } else {
                this.$message.error(res.msg);
              }
            });
          });
        }
      });
    },

    contentListAdd(index) {
      console.log(index);
      this.ruleData.contentList.push({});
    },
    contentListDel(index) {
      this.ruleData.contentList.splice(index, 1);
    },
    handleClone() {
      this.checkboxGroup = [];
      this.ruleData.cardType = "";
      this.clearingData();
      this.isCheckboxGroup = true;
      this.drawer.show = false;
    },
    handleClose() {
      this.handleClone();
    },

    // 点击单选框按钮活动形式
    inputRadioActivity() {
      console.log("充值消费", this.ruleData.activityMode);
      this.$refs.ruleDataFormRef.validateField(["activityMode"]);
      // 消费
      if (this.ruleData.activityMode === "consume") {
        this.checkboxGroup = [];
        this.isCheckboxGroup = false;
        // 充值
      } else if (this.ruleData.activityMode === "recharge") {
        this.clearingData();
        this.checkboxGroup = [];
        this.isCheckboxGroup = true;
      }
    },
    // 点击多选框
    inputRadioMethodPayment() {
      // console.log("微信手动", this.checkboxGroup.join());
      this.$refs.ruleDataFormRef.validateField(["checkboxGroup"]);
      this.ruleData.payType = this.checkboxGroup.join();
    },
    // 电子卡类型
    inputRadioCardType() {
      console.log("电子卡类型", this.ruleData.cardType);
      this.$refs.ruleDataFormRef.validateField(["cardType"]);
    },
  },
  computed: {
    authUser() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
  },
  watch: {
    parm(newValue) {
      console.log("查看新增", newValue);
      this.drawer.show = newValue.drawerShow;
      this.drawer.type = newValue.drawerType;
      this.ruleData = newValue.ruleData;
      this.settingData = newValue.settingData;
      if (newValue.drawerType === "new") {
        this.ruleData.activityMode = "recharge";
        if (newValue.settingData.stationList.length === 1) {
          this.ruleData.stationId =
            newValue.settingData.stationList[0].stationId;
        }
      } else {
        if (this.ruleData.activityMode === "recharge") {
          this.ruleData.activityMode = "recharge";
          let checkList = newValue.ruleData.payType?.split(",");
          if (checkList) {
            checkList.forEach((res) => {
              this.checkboxGroup?.push(res);
            });
          }
          this.isCheckboxGroup = true;
        } else if (this.ruleData.activityMode === "consume") {
          this.formConsumption.contentList = newValue.ruleData.contentList;
          this.formConsumption.settingRuleType =
            newValue.ruleData.settingRuleType;
          this.ruleData.activityMode = "consume";
          this.isCheckboxGroup = false;
          if (newValue.ruleData.accordingTo === "amount") {
            this.formConsumption.accordingTo = "amount";
            this.amount = true;
            this.litres = false;
          } else if (newValue.ruleData.accordingTo === "litres") {
            this.formConsumption.accordingTo = "litres";
            this.amount = false;
            this.litres = true;
          }
        }
      }

      this.$nextTick(() => {
        this.$refs.ruleDataFormRef.clearValidate();
      });
    },
    "ruleData.sendFlag": {
      handler(newValue) {
        if (newValue === 0) {
          this.ruleData.wxContent = ""; //清空输入框
        }
      },
      deep: true,
    },
  },
};
</script>
<style scoped lang="scss">
.span-yan {
  height: 40px;
  line-height: 40px;
  margin: 0px 50px 0px 10px;
}
.span-yang {
  width: 60px;
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
}
.span-div-qj {
  margin-right: 507px;
}
.span-div {
  margin: 30px 0px;
  width: 100%;
  font-size: 15px;
  display: flex;
  flex-direction: row;
}
.span-text {
  margin-right: 30px;
}

::v-deep.el-checkbox-button {
  margin-right: 40px;

  .el-checkbox-button__inner {
    text-align: center;
    line-height: 35px;
    padding: 0px;
    width: 125px;
    height: 35px;
    color: #409eff;
    border: 1px solid #409eff !important;
    border-radius: 5px;
  }
}
::v-deep.el-checkbox-button.is-checked .el-checkbox-button__inner {
  color: #fff !important;
  background-color: #409eff;
}
::v-deep.el-radio-button {
  margin-right: 40px;

  .el-radio-button__inner {
    // background-color: #ffac40;
    //修改按钮样式
    text-align: center;
    line-height: 35px;
    padding: 0px;
    width: 125px;
    height: 35px;
    color: #409eff;
    border: 1px solid #409eff !important;
    border-radius: 5px;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    // 修改按钮激活样式
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
}

.radio-activity {
  margin-bottom: 20px;
}

.title_line {
  position: relative;
  font-size: 23px;
}
.title_line::after {
  content: "";
  display: block;
  position: absolute;
  height: 20px;
  width: 5px;
  top: 4px;
  left: -10px;
  background-color: rgba(242, 131, 0, 1);
}

::v-deep .add-drawer {
  overflow-y: auto;
}
</style>
